<script setup lang="ts">
import { computed, reactive, ref } from 'vue';

interface IListData {
    name: string;
    price: number;
    num: number;
    color: string;
}

const jiansuoValue = ref<string>('')
const listData = reactive<IListData[]>([
    {
        name: '冰箱',
        price: 2000,
        num: 1,
        color: 'red'
    },
    {
        name: '空调',
        price: 100,
        num: 1,
        color: 'green'
    },
    {
        name: '彩电',
        price: 1500,
        num: 1,
        color: 'yellow'
    },
]);

const searchData = computed(() => {
    return listData.filter(item => item.name.includes(jiansuoValue.value));
})
const allNum = computed(() => {
    return searchData.value.reduce((prev: number, next: IListData) => {
        return prev + next.num * next.price;
    }, 0)
})
// 删除
const handleDelete = (index: number) => {
    listData.splice(index, 1)
}

</script>


<template>
    <div>
        检索：<n-input v-model:value="jiansuoValue" type="text" placeholder="基本的 Input" />

    </div>
    <n-table :single-line="false">
        <thead>
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>颜色</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in searchData" key="item.name">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td>{{ item.num }}</td>
                <td>{{ item.color }}</td>
                <td>
                    <n-button type="primary" @click="handleDelete(index)">
                        删除
                    </n-button>
                </td>
            </tr>
            <tr>
                <td>合计: {{ allNum }}</td>
            </tr>
        </tbody>
    </n-table>
</template>